<template>
  <div class="product" @click="clickThisProduct" v-if="productObj">
    <img :src="productObj.image" alt="" class="product_img">
    <div class="product_info" >
      <div class="product_info__name">{{ productObj.name }}</div>
      <div class="product_info__desc">{{ productObj.desc }}</div>
      <div class="product_info_price">
        <div class="product_info_price__price">{{ productObj.price }}</div>
        <div class="product_info_price__old_price">{{ productObj.old_price }}</div>
      </div>
    </div>
    <!-- 右箭头 -->
    <van-icon name="arrow" />
  </div>
</template>

<script>
export default {
  name: 'product',
  props: {
    product: {
      type: Object
    }
  },
  data () {
    return {
      productObj: this.product
    }
  },
  methods: {
    // 点击 商品 组件
    clickThisProduct () {
      // console.log(`id为：${this.productObj.id} 的商品被点击`)
      this.$router.push(`/product_detail/${this.productObj.id}`)
    }
  }
}
</script>

<style lang="less" scope="scoped">
  .product{
    width:100%;
    height: 120px;
    box-sizing: border-box;
    display:flex;
    align-items: center;
    // background-color:chartreuse;
    .product_img{
      width:120px;
      height: 100px;
      background-color:#ddd;
      margin:0 10px 0 5px;
    }
    .product_info{
      height: 100px;
      display:flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      flex:1;
      margin-left:5px;
      .product_info__name{
        font-size: 15px;
      }
      .product_info__desc{
        font-size: 13px;
        margin:5px 0;
        text-align: left;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .product_info_price{
        display:flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
      }
      .product_info_price__price::before{
        content:'¥';
        margin-right:3px;
      }
      .product_info_price__price{
         color: #e74c3c;
      }
      .product_info_price__old_price::before{
        content:'¥';
        margin:0 0 0 10px;
      }
      .product_info_price__old_price{
        font-size: 13px;
        text-decoration: line-through;
      }
    }
    .van-icon{
      margin-right: 10px;
    }
  }
</style>
